<template>
  <div class="home">
    <div class="top">
      <p>移交申请</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>资产管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备移交</el-breadcrumb-item>
        <el-breadcrumb-item>移交申请</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <!-- 搜索 -->
      <el-input
        clearable
        style="width: 150px"
        v-model="connectApplyNum"
        placeholder="申请单号"
      ></el-input>
      <el-input
        clearable
        style="width: 150px"
        v-model="applyPerson"
        placeholder="申请人员"
      ></el-input>
      <el-select clearable style="width: 150px" v-model="connectApplyDep" placeholder="申请部门">
        <el-option v-for="item in connectApplyDepOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select clearable style="width: 150px" v-model="connectApplyState" placeholder="状态">
          <el-option v-for="item in connectApplyStateOption"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker clearable v-model="startTime" align="right" type="date" placeholder="开始日期">
      </el-date-picker>
      <el-date-picker clearable v-model="endTime" align="right" type="date" placeholder="结束日期">
      </el-date-picker>
      <el-button
        @click="onSearch"
        style="background-color: #0bb197"
        type="success"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button class="reset" @click="onReset" icon="el-icon-refresh">重置</el-button>
    </div>

    <!-- 数据 -->
    <div class="body">
      <div class="div">
        <h4>查询结果列表</h4>
        <el-button style="background-color: #0bb197" type="primary"
         @click="addDialog = true"
          >新增</el-button
        >
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="序号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="connectApplyNum"
          label="申请单号"
          
        ></el-table-column>
        <el-table-column
          align="center"
          prop="connectApplyDep"
          label="申请部门"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="applyPerson"
          label="申请人员"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="applicationTime"
          label="申请时间"
          width="200"
        >
        <template slot-scope="scope"><span>{{timeTrans(scope.row.applicationTime)}}</span></template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="connectMsg"
          label="移交事由"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="connectDep"
          label="移交部门"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="connectDate"
          label="移交日期"
          width="150"
        >
        <template slot-scope="scope"><span>{{timeTrans(scope.row.applicationTime,1)}}</span></template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="connectEquipmentNum"
          label="移交设备数量"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="connectApplyState"
          label="状态"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.connectApplyState == 0 ? "待审批" : "审批通过"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="operation"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <el-button style="color: #0bb197" type="text" size="small" @click="query(scope.row)"
              >详情</el-button
            >
            <el-button style="color: #0bb197" type="text" size="small"
             @click="openEdit(scope.row)" >编辑</el-button
            >
            <el-button
              v-if="scope.row.connectApplyState == 0"
              style="color: #0bb197"
              type="text"
              size="small"
              @click="del(scope.row.id)"
              >撤销
            </el-button>
            <span v-else></span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        class="msg-pagination-container"
      >
      </el-pagination>

      <!-- 新增数据 -->
      <el-dialog title="新增申请" :visible.sync="addDialog">
        <el-form :model="addData">
          <div class="addB">
            <el-form-item label="申请单号" >
              <el-input
                v-model="addData.connectApplyNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="移交日期" >
              <el-date-picker style="width:350px" v-model="addData.connectDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="接收日期" >
              <el-date-picker style="width:350px" v-model="addData.connectDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="移交部门" >
              <el-input
                v-model="addData.connectApplyDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
              <el-form-item label="移交负责人" >
                <el-input
                  v-model="addData.handsOverLeader"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="移交经手人" >
              <el-input
                v-model="addData.handsOverPerson"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="接收部门" >
              <el-input
                v-model="addData.receiverDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="接收负责人" >
              <el-input
                v-model="addData.receiverLeader"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="接收经手人" >
              <el-input
                v-model="addData.receiver"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="移交事由" >
              <el-input v-model="addData.connectMsg" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="移交设备数量" >
              <el-input
                v-model="addData.connectEquipmentNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请部门" >
              <el-input
                v-model="addData.connectApplyDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="button" @click="addDialog = false">取 消</el-button>
          <el-button type="primary" @click="add" style="background-color:#0bb197;border:1px solid #0bb197;">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改数据 -->
      <el-dialog title="编辑移交申请" :visible.sync="editDialog">
        <el-form :model="editData">
          <div class="addB">
            <el-form-item label="申请单号" >
              <el-input
                v-model="editData.connectApplyNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="接收日期" >
                <el-date-picker style="width:350px" v-model="editData.connectDate" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
          </div>
          <div class="addB">
              <el-form-item label="移交部门" >
              <el-input v-model="editData.connectApplyDep" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="移交负责人" >
                <el-input
                  v-model="editData.handsOverLeader"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
          </div>
          <div class="addB">
              <el-form-item label="移交经手人" >
                <el-input
                  v-model="editData.handsOverPerson"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="接收部门" >
              <el-input
                v-model="editData.receiverDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="接收负责人" >
              <el-input
                v-model="editData.receiverLeader"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="接收经手人" >
              <el-input
                v-model="editData.receiver"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="移交事由" >
              <el-input
                v-model="editData.connectMsg"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="移交设备数量" >
              <el-input
                v-model="editData.connectEquipmentNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="申请部门" >
              <el-input
                v-model="editData.connectApplyDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请人员" >
              <el-input
                v-model="editData.applyPerson"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="状态" >
              <el-input
                v-model="editData.connectApplyState"
                autocomplete="off"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="button" @click="editDialog = false">取 消</el-button>
          <el-button type="primary" @click="edit" style="background-color:#0bb197;border:1px solid #0bb197;">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 详情信息弹窗 -->
      <el-dialog title="详情信息" :data="queryData" :visible.sync="queryDialog" style="color:0bb197">
        <div class="queryDetails">
          <p>申请单号：{{row.connectApplyNum}}</p>
          <p>移交日期：{{row.connectDate}}</p>
        </div>
        <div class="queryDetails">
          <p>接收日期：{{row.applicationTime}}</p>
          <p>移交部门：{{row.connectApplyDep}}</p>
        </div>
        <div class="queryDetails">
          <p>移交负责人：{{row.handsOverLeader}}</p>
          <p>移交经手人：{{row.handsOverPerson}}</p>
        </div>
        <div class="queryDetails">
          <p>接收部门：{{row.receiverDep}}</p>
          <p>接收负责人：{{row.receiverLeader}}</p>
        </div>
        <div class="queryDetails">
          <p>接收经手人：{{row.receiver}}</p>
          <p>移交事由：{{row.connectMsg}}</p>
        </div>
        <div style="margin-left:15px">
          <p class="startDate" style="margin:15px 0">设备列表:</p>
            <el-table
                :data="detailsData"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="序号"
                  >
                </el-table-column>
                <el-table-column
                  prop="equipmentCoding"
                  label="设备编码"
                  >
                </el-table-column>
                <el-table-column
                  prop="deviceName"
                  label="设备名称">
                </el-table-column>
                <el-table-column
                  prop="equipmentModel"
                  label="设备型号">
                </el-table-column>
                <el-table-column
                  prop="manufacturers"
                  label="厂家名称">
                </el-table-column>
                <el-table-column
                 align="center"
                prop="purchaseDate"
                label="购入时间"
                width="150">
                <template slot-scope="scope"><span>{{timeTrans(scope.row.purchaseDate,1)}}</span></template>
                </el-table-column>
              </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import time from "../utils/time"
export default {
  mixins:[time],
  data: function () {
    return {
      connectApplyNum: "",
      applyPerson:"",
      connectApplyDep:"",
      connectApplyState:"",
      startTime:"",
      endTime:"",
      tableData: [],
      total: 1,
      count: 5,
      page: 1,
      addDialog: false,
      addData: {
        connectApplyNum:'',
        connectDate: "",
        applicationTime:"",
        connectDep: "",
        handsOverLeader: "",
        handsOverPerson: "",
        receiverDep:'',
        receiverLeader:"",
        receiver: "",
        connectMsg: "",
        connectApplyDep:"",
        connectEquipmentNum:"",
        connectApplyState:0
      },
      editDialog:false,
      editData:{},
      row:'',
      queryDialog:false,
      queryData:{},
      detailsData:[],
      connectApplyDepOptions:[],
      connectApplyDepValue:'',
      connectApplyStateVa:'',
      connectApplyStateOption:[
        {
          value:0,
          label:'待审批'
        },
        {
          value:1,
          label:'审批通过'
        }
      ]
    };
  },
  methods: {
    //分页
    handleSizeChange(val){
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val){
      this.page = val;
      this.getData();
    },
    //数据渲染
    getData: function () {
      this.$axios({
        url: "/smart/connect-apply/list",
        method: "get",
        params: {
          pageNum: this.page,
          pageSize: this.count,
          applyId:this.connectApplyNum,
          applyPerson:this.applyPerson,
          dept:this.connectApplyDep,
          status:this.connectApplyState,
          startTime:this.startTime,
          endTime:this.endTime
          },
      }).then(({ data }) => {
        if (data.code == 2000) {
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    getSearch:function(){
      this.$axios({
        url: "/smart/connect-apply/list",
        method: "get",
        params: {
          pageNum: 1,
          pageSize: 100000,
        },
      }).then(({ data }) => {
        if (data.code == 2000) {
          // this.tableData = data.data.list;
          data.department.forEach((v) => {
            let item = {
              value:v,
              label:v,
            };
            this.connectApplyDepOptions.push(item);
          })
        } 
      });
    },
    //查询
      onSearch: function () {
      this.getData();
    },
    //重置
    onReset: function () {
      this.connectApplyNum='',
      this.applyPerson='',
      this.connectApplyState='',
      this.connectApplyDep='',
      this.startTime = '',
      this.endTime='',
      this.getData();
    },
     //新增
    add: function () {
      this.$axios({
        url: "/smart/connect-apply/add",
        method: "post",
        data: this.addData,
      }).then(({ data }) => {
        if ((data.code = 2000)) {
          console.log(data);
          
          this.$message.success("添加成功");
          this.addDialog = false;
          this.getData();
        } else {
          console.log(data);
          this.$message.error("添加失败");
        }
      });
    },
    //编辑
    openEdit:function(row){
      //编辑框显示出来
      this.editDialog = true;
      //赋值
      let editData = {...row};
      this.editData = editData;
    },
    edit:function(){
      this.$axios({
        url:"/smart/connect-apply/edit",
        method:"put",
        data:this.editData
      }).then(({data})=>{
        if(data.code == 2000){
          this.$message.success('修改成功');
          this.editDialog = false;
          this.getData();
        }else(
          this.$message.error('修改失败')
        )
      })
    },
    //详情
    query:function(row){
      this.row = row;
      console.log('111',row);
      this.queryDialog = true;
      this.$axios({
        url:"/smart/equipment/queryById/"+row.id
      }).then(({data})=>{
        console.log("222",data);
        if(data.code == 2000){
          this.queryData=data.data;
          this.detailsData = [data.data];
          this.queryData.connectDate = this.timeTrans(this.queryData.connectDate);
          this.queryData.applicationTime = this.timeTrans(this.queryData.applicationTime);
          // console.log(typeof this.detailsData.purchaseDate);
          this.getData();
        }
      })
    },
    //撤销
    del:function(row){
      this.$confirm('请问是否确认撤销设备移交申请单？','确认信息',{
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        confirmButtonClass:"confirmButton",
        cancelButtonClass:"cancelButton",
      }).then(()=>{
        this.$axios({
          url:"/smart/connect-apply/del/"+row,
          method:"DELETE",
        }).then(({data})=>{
          if ((data.code = 2000)) {
            this.$message.success("撤销成功");
            this.getData();
          } else {
            this.$message.error("撤销失败");
          }
        });
      }).catch(() => {
          this.$message({
            type: 'error',
            message: '已取消'
          });          
        });
    }
  },
  mounted: function () {
    this.getData();
    this.getSearch();
  },
};
</script>

<style scoped>
.home {
  height: 95%;
}
.top {
  display: flex;
  justify-content: space-between;
  margin: 20px 20px 10px 25px;
}
.header {
  height: 60px;
  background: white;
  margin: 10px 20px 20px;
  padding-top: 18px;
  padding-left: 15px;
  border-radius: 8px;
}
.reset{
  color: rgb(197, 196, 196);;
}
.reset:hover{
  color: #0bb197;
}
.el-input,
.el-select {
  margin-right: 10px;
}
.el-button {
  margin-left: 10px;
}
.body {
  background: white;
  margin: 10px 20px;
  height: 84%;
  border-radius: 8px;
}
.el-pagination {
  margin: 25px 10px 0 0;
  display: flex;
  justify-content: right;
}
.div {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.el-form-item{
  width: 350px;
}
.addB{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.dialog-footer{
  display: flex;
  justify-content: center;
}
.button:hover{
  color: #0bb197;
  border: 1px solid #0bb197;
}
</style>
<style>
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #0bb197;
  color: #fff;
}
.queryDetails{
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 15px;
}
.queryDetails p{
  width: 50%;
}
.confirmButton{
  color: #FFF;
    background-color:#0bb197 !important;
    border-color: #0bb197 !important;
}
.cancelButton{
  color: #c0c4cc;
  background-color:#FFF;  
}
.cancelButton:hover{
  color:#0bb197;
  border:1px solid #0bb197 ;
}
</style>
